<template>
  <view class="flex-col page">
    <view class="flex-col justify-start items-center flex-auto group_3">
      <view class="grid">
		  
		<view class="flex-col items-center grid-item space-y-4" v-for="item,index in equips" @click="bindequip(index)">
			<image class="image_6" src="../../static/images/0f4dce6d68b890072ec2a4580ff2e679.png" />
			<text class="font_2">{{item.name_equip}}</text>
		</view>
		  
<!--        <view class="flex-col items-center grid-item space-y-4">
          <image class="image_6" src="../../static/images/0f4dce6d68b890072ec2a4580ff2e679.png" />
          <text class="font_2">KJ 1000℃</text>
          <text class="font_2">箱式电阻炉</text>
        </view>
		
        <view class="flex-col items-center grid-item space-y-4">
          <image class="image_6" src="../../static/images/019763cd079e7d3c4ed9060bec42343b.png" />
          <text class="font_2">KJ 1200℃</text>
          <text class="font_2">箱式电阻炉</text>
        </view>
		
        <view class="flex-col items-center grid-item space-y-4">
          <image class="image_6" src="../../static/images/d2161140ba9973f7ff64d711cd6d52fd.png" />
          <text class="font_2">KJ 1400℃</text>
          <text class="font_2">箱式电阻炉</text>
        </view>
		
        <view class="flex-col items-center grid-item space-y-4">
          <image class="image_6" src="../../static/images/a4ed319131af18cc6bae5163720f4560.png" />
          <text class="font_2">KJ 1600℃</text>
          <text class="font_2">箱式电阻炉</text>
        </view>
		
        <view class="flex-col items-center grid-item space-y-4">
          <image class="image_6" src="../../static/images/77f77af556cdd77b146d6f6f64fb49bb.png" />
          <text class="font_2">KJ 1800℃</text>
          <text class="font_2">箱式电阻炉</text>
        </view> -->
		
      </view>
    </view>
  </view>
</template>

<script>
	//根据第一大类序号和第二大类序列号查找相关设备
	import { _getequips } from '@/service/equip.js'
	
	//设备绑定
	import { _bindequips } from '@/service/equip.js'
	
	// 用户申请对某设备的共享
	import {_applysharing} from '@/service/sharingequip.js';
  export default {
    components: {},
    data() {
      return {
		  equips:[],
		  nickname:'',
		  account_user:'',
		  password_user:'',
		  serialnum:'',
		  cbindinguseraccount:'',
		  serialnum_equip:'',
		  
		  socketTask: null,
		  // 确保websocket是打开状态
		  is_open_socket: false,
		  
		  status: ''
	  };
    },
	created() {
		this.connectSocketInit()
	
	},
	onShow(){
		let newdata;
		try {
			const value = uni.getStorageSync('userInfo');
			if (value != null) {
				this.nickname = value.nickname
				this.account_user = value.accountNum
				this.password_user = value.password
			}
			console.log(value)
		} catch (e) {
			console.error(e);
		}
		this.getequips();
		// this.allapplyandinvite()
	},
    methods: {
		connectSocketInit() {
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask = uni.connectSocket({
				url: 'ws://43.142.102.167:8088/woonsocket/' + this.account_user,
				success(data) {
					console.log("websocket连接成功");
				},
			});
			this.socketTask.onOpen((res) => {
				console.log(" WebSocket连接正常打开中...！");
				this.is_open_socket = true;
			});
		
			this.socketTask.onMessage((res) => {
				console.log("收到服务器内容：");
				console.log(res.data);
				this.$api.msg(res.data)
				this.sharemsg = res.data
			});
		
			this.socketTask.onClose(() => {
				console.log("WebSocket已经被关闭了");
				this.is_open_socket = false;
			});
		},
		navTo(url){
			uni.navigateTo({
				url:url,
				success(res) {
					console.log('成功啦',res);
				},
				fail(err) {
					console.log('失败啦',err);
				}
			})
		},
		//申请共享
		async applysharing(){
			// let data={
			// 	serialnum_sharingequip:this.serialnum_equip,
			// 	account_sharingequip:this.account_user
			// }
			// console.log(this.serialnum_equip,this.account_user)
			// let res = await _applysharing(data)
			// console.log(res.data)
			
		},
		
		async getequips(){
			let data={
				serialnum_fequip:'01',
				serialnum_sequip:'001'
			}
			let res = await _getequips(data)
			this.equips = res.data
			this.serialnum=res.data.serialnum_equip
			this.cbindinguseraccount=res.data.cbindinguseraccount_equip
			console.log(this.equips)
		},
		
		
		async bindequip(index){
			if (this.equips[index].bindingtag_equip == '1'){
				if (this.equips[index].cbindinguseraccount_equip == this.account_user){
					let name = this.equips[index].cbindinguseraccount_equip.slice(7)
					uni.showModal({
						title:'提示',
						content:'您已绑定该设备，请在主界面直接连接！',
						confirmText:'前往主界面',
						success: function (res){
							if (res.confirm) {
								uni.switchTab({
									url:'/pages/index1/index1'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else{
					let name = this.equips[index].cbindinguseraccount_equip.slice(7)
					console.log(this.equips[index].cbindinguseraccount_equip)
					this.serialnum_equip=this.equips[index].serialnum_equip
					console.log(this.serialnum_equip)
					uni.showModal({
						title:'提示',
						content:'本设备已被****'+name+'绑定，请向其申请共享',
						confirmText:'申请共享',
						success:async function (res){
							if (res.confirm) {
								// this.allapplyandinvite()
								// this.applysharing();
								let data={
									serialnum_sharingequip:this.serialnum_equip,
									account_sharingequip:this.account_user
								}
								console.log(this.serialnum_equip,this.account_user)
								let res = await _applysharing(data)
								console.log(res)
								
								let datas = {
									sender: this.account_user,
									receiver: this.equips[index].cbindinguseraccount_equip,
									serialnum: this.serialnum_equip,
									status: 'APPLISHARE'
								};
								if (this.is_open_socket) {
									this.socketTask.send({
										data: JSON.stringify(datas), // 将对象转换为字符串发送
										async success() {
											console.log(datas);
											console.log("消息发送成功");
										},
									});
								}
								
								if (res.flag==true) {
								  setTimeout(() => {
								    uni.hideLoading();
									this.$api.msg('您已申请成功，请耐心等待绑定人同意！');
								  }, 200);
								} else {
								  setTimeout(() => {
								    uni.hideLoading();
								    this.$api.msg('您已申请该设备的共享权限，请勿重复申请');
								  }, 200);
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}.bind(this)
					})
				}
			}else{
				uni.showModal({
					title:'提示',
					content:'是否绑定'+this.equips[index].name_equip+'？',
					success: async function (res){
						if (res.confirm) {
							uni.showLoading({
								title: '绑定中...',
							});
							// console.log('用户点击确定');
							let data = {
								serialnum_equip:this.equips[index].serialnum_equip,
								account_user:this.account_user
							}
							let res = await _bindequips(data)
							console.log(res)
							this.getequips()
							setTimeout(()=>{
								uni.hideLoading();
								this.$api.msg('绑定成功！');
								uni.switchTab({
									url: '/pages/index1/index1'
								});
							}, 500)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				})
			}
		}
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group_3 {
      padding: 41.67rpx 0 239.58rpx;
      overflow-y: auto;
      .grid {
	    margin-top: 50rpx;
        width: 650rpx;
        height: 1085.42rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45.83rpx;
        column-gap: 97.92rpx;
        .grid-item {
          padding: 25rpx 0 12.5rpx;
          filter: drop-shadow(0px 4.17rpx 4.17rpx #00000040);
          background-image: url('../../static/images/8f77a6de06eaa9a5a8b08f50c0f5ae95.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 277.08rpx;
          .image_6 {
            width: 112.5rpx;
            height: 112.5rpx;
          }
          .font_2 {
            font-size: 26.67rpx;
            font-family: SourceHanSansCN;
            line-height: 50rpx;
            color: #000000;
          }
        }
        .space-y-4 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 8.33rpx;
          }
        }
      }
    }
  }
</style>